<template>
	<div class="x-content-body">
		<keep-alive><component :is="subComponent" ></component></keep-alive>
	</div>
</template>

<script setup>
	import { reactive,shallowRef,onMounted, onUnmounted, onBeforeMount,defineAsyncComponent } from 'vue';
	import loadingComponent from '@/components/LoadingPage.vue';
	import errorComponent from '@/components/Error.vue';
	import {coreStore} from '@/stores/core';
	import OneUtil from '@/utils/OneUtil';
	const $coreStore = coreStore();
	
	const subComponent = shallowRef(null);
	
	const props = defineProps({item:{}});
	
	onMounted(()=> {
		console.log('-> x-content init');
	})
	
	onBeforeMount(() => {
		if(OneUtil.ObjectIsNull(props.item.page)) {
			subComponent.value =  errorComponent;
			return;
		}
		let dirs = props.item.page.split('/');
		subComponent.value = defineAsyncComponent({
			loader: () => import(/* @vite-ignore */`../page/${dirs[0]}/${dirs[1]}`),
			loadingComponent: loadingComponent,
			errorComponent: errorComponent,
			delay: 1000
		});
	});
	
	onUnmounted(()=>{
		console.log('-> x-content destory');
	})
</script>

<style scoped>
	.x-content-container {
		width:100%;
		height:100%;
		margin-top: 0.5rem;
		margin-left: 0.2rem;
	}
	.x-content-body {
		width:100%;
		height:100%;
		margin-left: 0.2rem;
	}
</style>